<template>
	<el-container>
		<el-header height="40px">
			<ui-head  v-on:setMoreDrawer="setMoreDrawer"></ui-head>
		</el-header>
		<el-main>
			<div class="fl-container" v-if="isCocosGame">
				<div class="fl-left">
					<div class="fl-resize-bar"></div>
					<div class="fl-resize-line"></div>
					<div class="fl-cont-left" v-if="treeData.length > 0">
						<ui-tree v-bind:treeData="treeData" ref="tree"></ui-tree>
					</div>
				</div>
				<div class="fl-right">
					<div class="fl-cont-right">
						<ui-details></ui-details>
					</div>
				</div>
			</div>

			<div class="ui-emty" v-if="!isCocosGame">
				<image class="logo" src="/static/logo.png"></image>
				<view class="text-area">
					<text class="title">No Data!</text>
				</view>
			</div>

		</el-main>
		<el-drawer
		  title="更多游戏设置"
		  size="50%"
		  :visible.sync="showDrawer">
		  <ui-drawer-more v-on:setMoreDrawer="setMoreDrawer"></ui-drawer-more>
		</el-drawer>
		
	</el-container>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				checkedData: state => state.app.checkedData,
				treeItemData: state => state.app.treeItemData,
				isCocosGame: state => state.app.isCocosGame,
				treeData: state => state.app.treeData,
			})
		},
		data() {
			return {
				showDrawer:false
			}
		},
		created() {
			if (chrome && chrome.runtime) {

			} else {
				this.$store.commit('SET_ISCOCOSGAME', false);
				return;
			}
			let connection = chrome.runtime.connect({
				name: btoa("for" + String(chrome.devtools.inspectedWindow.tabId))
			});
			chrome.runtime.onMessage.addListener(function(message) {
				if (message !== null) {
					console.log('message3', message);
					let msgType = {
						nodeInfo: 2, //节点信息
						nodeListInfo: 1, // 节点列表信息
						notSupport: 0, // 不支持的游戏
					};
					if (message.type === msgType.nodeListInfo) { // 游戏节点
						this.$store.commit('SET_ISCOCOSGAME', true);
						// let str = JSON.stringify(message.msg);
						this._updateView(message.msg);
					} else if (message.type === msgType.notSupport) { // 不支持调试
						this.$store.commit('SET_ISCOCOSGAME', false);
					} else if (message.type === msgType.nodeInfo) {
						this.$store.commit('SET_ISCOCOSGAME', true);
						this.$store.commit('SET_UUID', message.msg.uuid);
						this.$store.commit('SET_TREEITEMDATA', message.msg);
					}
				}
			}.bind(this));
		},
		onLoad() {
		},
		methods: {
			setMoreDrawer(value){
				this.showDrawer = value;
			},
			handleNodeClick(data) {
				// 去获取节点信息
				let uuid = data.uuid;
				if (uuid !== undefined) {
					let code = "window.getNodeInfo('" + uuid + "')";
					chrome.devtools.inspectedWindow.eval(code);
				}
			},
			_updateView(data) {
				var _this = this;
				let treeData = [];
				let checkedData = [];
				this.$store.commit('SET_CHECKDATA', []);
				// 构建树形数据
				this.$store.commit('SET_RREEDATA', []);
				let sceneData = data.scene;
				if (sceneData) {
					// scene info
					let dataRoot = {
						type: sceneData.type,
						uuid: sceneData.uuid,
						name: sceneData.name,
						children: [],
						active: false,
						disabled: true
					};
					
					checkedData.push(sceneData.uuid);
					treeData.push(dataRoot);
					this.handleNodeClick(dataRoot);
					// scene children info
					for (let k in sceneData.children) {
						let itemSceneData = sceneData.children[k];
						let sceneItem = {};
						dealChildrenNode(itemSceneData, sceneItem);
						treeData[0].children.push(sceneItem);
					}
				}
				// TODO 节点树折叠的问题
				if (JSON.stringify(treeData) === "[]") { // 第一次赋值

				} else { // 更新值
				}
				function dealChildrenNode(rootData, obj) {
					// obj['data'] = rootData;
					obj['uuid'] = rootData.uuid;
					obj['name'] = rootData.name;
					obj['type'] = rootData.type;
					obj['active'] = rootData.active;
					obj['children'] = [];
					obj['isBlockInput'] = rootData.isBlockInput;
					
					if (rootData.active){
						checkedData.push(rootData.uuid);
					}

					let rootChildren = rootData.children;
					for (let k in rootChildren) {
						let itemData = rootChildren[k];
						let item = {};
						dealChildrenNode(itemData, item);
						obj.children.push(item);
					}
				}
				console.log('this.treeData=>', treeData);
				this.$store.commit('SET_CHECKDATA', checkedData);
				this.$store.commit('SET_RREEDATA', treeData);

			}
		}
	}
</script>
<style lang="scss">
	.el-container {
		width: 100%;
		height: 100%;
	}

	.fl-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.el-header {
		display: flex;
		position: fixed;
		z-index: 99;
		width: 100%;
		background-color: #fff;
		border-bottom: 1px solid #d3d3d3;
	}

	.el-main {
		padding: 40px 0px 0px 0px;
	}

	.fl-resize-bar,
	.fl-resize-bar::-webkit-scrollbar {
		width: 240px;
	}

	.fl-left {
		position: relative;
		float: left;
		height: 100vh;
	}

	.fl-right {
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.fl-cont-right {
		/* height: 200vh; */
	}

	.fl-resize-bar {
		height: inherit;
		resize: horizontal;
		cursor: ew-resize;
		cursor: col-resize;
		opacity: 0;
		overflow: scroll;
	}

	.fl-resize-bar::-webkit-scrollbar {
		width: 100px;
		height: inherit;
	}

	.fl-cont-left {
		position: absolute;
		top: 0;
		right: 4px;
		/* 拖拽线的间距 */
		bottom: 0;
		left: 0;
		overflow-x: hidden;
	}

	.fl-resize-line {
		position: absolute;
		right: 1px;
		top: 0;
		bottom: 0;
		border-right: 1px solid #d3d3d3;
		pointer-events: none;
	}

	.fl-resize-bar:hover~.fl-resize-line,
	.fl-resize-bar:active~.fl-resize-line {
		/* 中间虚线悬停 */
	}

	.ui-emty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


		.logo {
			height: 100px;
			width: 100px;
			margin-top: 100px;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 25px;
		}

		.text-area {
			display: flex;
			justify-content: center;
		}

		.title {
			font-size: 20px;
			color: #8f8f94;
		}
	}
</style>